<template>
  <div class="sei-doubleChangeBtn" @click="toggleSprite">
    <div class="outer-bg">
      <div class="inner-bg">
        <div class="info-img" :class="{ down: isDownStatus }" />
        <div class="circlr-arrow" :style="{ transform: `translate(-50%, -50%) rotate(${rotationAngle}deg)` }" />
      </div>
    </div>
  </div>
  <div></div>
</template>
<script lang="ts" setup>
import { ref, watchEffect } from 'vue'
const props = defineProps({
  // 是否是下筒
  isDown: {
    type: Boolean,
    default: false
  }
})

const isDownStatus = ref(props.isDown) // 记录当前状态
const rotationAngle = ref(0) // 初始角度为 0
const emit = defineEmits(['switchClick'])

watchEffect(() => {
  isDownStatus.value = props.isDown
})
const toggleSprite = () => {
  isDownStatus.value = !isDownStatus.value
  rotationAngle.value += 180 // 每次点击旋转 180°
  emit('switchClick', isDownStatus.value)
}
</script>
<style lang="less" scoped>
@import './style/index.less';

[data-theme='haier'] .sei-doubleChangeBtn {
  --outer-bg: url(./image/haier/outerBg.png) no-repeat center / 100% auto;
  --inner-bg: url(./image/haier/innerBg.png) no-repeat center / 100% auto;
  --sprite: url(./image/casarte/sprite.png) no-repeat center / 100% auto;
  --circle-arrow: url(./image/haier/circleArrow.png) no-repeat center / 100% auto;
}

[data-theme='leader'] .sei-doubleChangeBtn {
  --outer-bg: url(./image/leader/outerBg.png) no-repeat center / 100% auto;
  --inner-bg: url(./image/leader/innerBg.png) no-repeat center / 100% auto;
  --sprite: url(./image/leader/sprite.png) no-repeat center / 100% auto;
  --circle-arrow: url(./image/leader/circleArrow.png) no-repeat center / 100% auto;
}

[data-theme='casarte'] .sei-doubleChangeBtn {
  --outer-bg: url(./image/casarte/outerBg.png) no-repeat center / 100% auto;
  --inner-bg: url(./image/casarte/innerBg.png) no-repeat center / 100% auto;
  --sprite: url(./image/casarte/sprite.png) no-repeat center / 100% auto;
  --circle-arrow: url(./image/casarte/circleArrow.png) no-repeat center / 100% auto;
}

.sei-doubleChangeBtn {
  .outer-bg {
    z-index: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
    background: var(--outer-bg);

    .circlr-arrow {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 60px;
      height: 60px;
      background: var(--circle-arrow);
      transition: transform 0.3s ease-in-out;
    }

    .inner-bg {
      display: flex;
      justify-content: center;
      overflow: hidden;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: var(--inner-bg);

      .info-img {
        width: 30px;
        height: 80px;
        background: var(--sprite);
        background-position: 0 5px;
        transition: background-position 0.3s ease-in-out;
      }

      .info-img.down {
        background-position: 0 -37.5px;
      }
    }
  }
}

.sei-doubleChangeBtn {
  width: 64px;
  height: 64px;
}
</style>
